// import ReactECharts from 'echarts-for-react'
import ReactEChartsCore from 'echarts-for-react/lib/core'
import * as echarts from 'echarts/core'
import { useEffect, useState } from 'react'
import { getSimpleData } from '@/api/echarts'
import { PieChart } from 'echarts/charts'
import {
  TooltipComponent,
  TitleComponent,
  LegendComponent
} from 'echarts/components'
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
  CanvasRenderer
  // SVGRenderer,
} from 'echarts/renderers'

// Register the required components
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer
])

export default function EchartsThird () {
  const [data, setData] = useState([] as { name: string; value: number }[])

  useEffect(() => {
    async function getData () {
      const res = await getSimpleData()
      setData(res.data)
    }

    getData()
  }, [])

  // 该方法不能是异步方法
  const getOption = () => {
    return {
      title: {
        text: 'XXX公司销售图',
        left: 'right'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '各个分公司销售情况',
          type: 'pie',
          radius: '50%',
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
  }

  return (
    // <ReactECharts style={{ height: 600 }} theme={'dark'} option={getOption()} />
    <ReactEChartsCore
      echarts={echarts}
      style={{ height: 600 }}
      theme={'dark'}
      option={getOption()}
    />
  )
}
